<template>
  <div class="setting-resume setting-content">
    <h3>个人简历
      <a-popover
        v-if="resumeId"
        placement="bottom"
      >
        <template slot="content">
          <div class="artile-list-operate">
            <p @click="handleEditResume"><a-icon type="edit" />更新简历</p>
            <p @click="handleExportResume"><a-icon type="download" />导出PDF</p>
          </div>
        </template>
        <p style="color: #000; font-size: 18px; cursor: pointer; margin-left: auto; font-weight: normal;">
          <i class="ri-more-line"></i>
        </p>
      </a-popover>
    </h3>
    <div class="content">
      <a-spin :spinning="requestLoading">
        <a-empty
          v-if="!resumeList.length"
          style="margin-top: 150px;"
          description="您还没有生成自己的简历"
          :image="require('~/assets/images/nodata.png')"
        >
          <a-button type="primary" @click="handleCreateResume">Create Now</a-button>
        </a-empty>
        <div class="show-block resume-display-content" id="resume-display-content" v-else>
          <a-spin :spinning="downlonadLoading">
            <div class="modal" v-for="item in resumeList.filter(o => o.visible)" :key="item.id">
              <!-- 基本信息 -->
              <template v-if="item.component === 'BasicInfo'">
                <div class="resume-modal-basic-info">
                  <div class="show-resume-header">
                    <p class="show-resume-header-title">{{ item.title }}</p>
                    <div class="LB-desc0"></div>
                    <div class="LB-desc1"></div>
                    <div class="LB-desc2"></div>
                  </div>
                  <div class="resume-content">
                    <div class="left-info-list">
                      <div
                        class="info-list-item"
                        v-for="(itemName, index) in item.data.list.slice(0, 2)"
                        :key="index"
                        :class="{ 'resume-name': index === 0, 'resume-job': index === 1 }">
                        <div class="info-list-item__name">{{ itemName.fieldName }}</div>
                        <em>：</em>
                        <div class="info-list-item__value">{{ itemName.fieldValue }}</div>
                      </div>
                      <br />
                      <div
                        class="info-list-item"
                        v-for="(itemName, index) in item.data.list.slice(2)"
                        :key="index + 2">
                        <div class="info-list-item__name">{{ itemName.fieldName }}</div>
                        <em>：</em>
                        <div class="info-list-item__value">{{ itemName.fieldValue }}</div>
                      </div>
                    </div>
                    <div class="right-avatar" v-if="item.data.showAvatar">
                      <img :src="item.data.avatar" alt="">
                    </div>
                  </div>
                </div>
              </template>

              <!-- 自定义信息 -->
              <template v-if="item.component === 'OtherInfo'">
                <div class="resume-modal-other-info">
                  <div class="show-resume-header">
                    <p class="show-resume-header-title">{{ item.title }}</p>
                    <div class="LB-desc0"></div>
                    <div class="LB-desc1"></div>
                    <div class="LB-desc2"></div>
                  </div>
                  <div class="resume-content"
                    v-for="(itemName, index) in item.data.list"
                    :key="index">
                    <div class="sub-top-title">
                      <div class="label-item"
                        v-for="(iitem, iidx) in itemName.order
                          .split(',')
                          .filter(o => itemName.visibleList.includes(o))
                          .filter(o => itemName[o].length)"
                        :key="iidx">
                        <p v-if="iitem !== 'time'">{{ itemName[iitem] }}</p>
                        <p v-else>{{ `${itemName[iitem][0]} ~ ${itemName.rightNow ? '至今' : itemName[iitem][1]}` }}</p>
                      </div>
                    </div>
                    <div
                      v-show="itemName.editorHtml.replace(/<p><br><\/p>/gi, '')"
                      class="edit-html-content wangeditor-show-html"
                      v-html="itemName.editorHtml"></div>
                  </div>
                </div>
              </template>
            </div>
          </a-spin>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResumePage',
  data () {
    return {
      themeColor: null,
      themeStyleName: null,
      resumeId: null,
      requestLoading: true,
      resumeList: [],
      downlonadLoading: false
    }
  },

  created () {
    this.findUserResume()
  },

  methods: {
    async findUserResume () {
      this.requestLoading = true
      try {
        const data = await this.$axios.get('/gimishare/api/v1/resume/find')
        const { id, content, themeColor, themeStyleName } = data.data || {}
        this.resumeList = JSON.parse(content)
        this.themeColor = themeColor
        this.themeStyleName = themeStyleName
        this.resumeId = id
        if (this.themeStyleName) {
          await this.loadResumeThemeCss()
          document.documentElement.style.setProperty('--resume-theme-color', themeColor)
        }
        this.requestLoading = false
      } catch (error) {
        this.requestLoading = false
      }
    },

    async handleExportResume () {
      if (this.downlonadLoading) return
      try {
        this.downlonadLoading = true
        const result = await this.$axios.post(`/gimishare/api/v1/resume/export`, {}, {
          responseType: 'blob'
        })
        const headers = result.headers
        const blob = new Blob([result.data], {
          type: headers['content-type']
        })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'resume.pdf'
        link.click()
        this.$message.success('导出简历成功')
      } catch (error) {
        this.$message.error('导出简历失败')
      } finally {
        this.downlonadLoading = false
      }
    },

    handleEditResume () {
      const { href } = this.$router.resolve(`/set-resume/${this.resumeId}`)
      window.open(href, '_blank')
    },

    loadResumeThemeCss () {
      return new Promise(resolve => {
        this.removeResumeThemeCss()
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = `/resule-theme-style/${this.themeStyleName}.css`
        link.id = 'resume-theme-css'
        document.head.appendChild(link)
        link.addEventListener('load', function () {
          resolve()
        })
      })
    },

    removeResumeThemeCss () {
      const link = document.querySelector('link#resume-theme-css')
      if (link) {
        document.head.removeChild(link)
      }
    },

    handleCreateResume () {
      const { href } = this.$router.resolve(`/set-resume`)
      window.open(href, '_blank')
    }
  },

  beforeDestroy () {
    this.removeResumeThemeCss()
    document.documentElement.style.setProperty('--resume-theme-color', '#000')
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 12px;
}
</style>
